<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust Web IDE</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.2/socket.io.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 顶部栏 -->
        <div class="header">
            <div style="display: flex; align-items: center; gap: 12px;">
                <button id="mobile-menu-btn" class="mobile-menu-btn">☰</button>
                <h1>Rust Web IDE</h1>
                <span id="connection-status" class="connection-status connecting"></span>
            </div>
            
            <div class="auth-section">
                <div id="userInfo" class="user-info" style="display: none;">
                    <span class="username" id="username"></span>
                    <button class="btn btn-info" id="system-info-btn">系统信息</button>
                    <button class="btn btn-danger" id="logout-btn">退出</button>
                </div>
                <div id="authButtons">
                    <button class="btn btn-primary" id="login-btn">登录</button>
                    <button class="btn btn-secondary" id="register-btn">注册</button>
                </div>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 侧边栏 -->
            <div id="sidebar" class="sidebar">
                <div class="sidebar-header">
                    <div class="sidebar-title">文件资源管理器</div>
                    <div class="sidebar-actions">
                        <button class="sidebar-action" id="refresh-tree" title="刷新">↻</button>
                        <button class="sidebar-action" id="sidebar-toggle" title="折叠侧边栏">◀</button>
                    </div>
                </div>
                
                <div id="file-tree" class="file-tree">
                    <!-- 文件树将通过 JavaScript 动态生成 -->
                </div>
            </div>
            
            <!-- 编辑器区域 -->
            <div class="editor-area">
                <!-- 编辑器标签页 -->
                <div id="editor-tabs" class="editor-tabs">
                    <!-- 标签页将通过 JavaScript 动态生成 -->
                </div>
                
                <!-- 编辑器工具栏 -->
                <div class="editor-toolbar">
                    <div class="editor-title" id="editor-title">无文件打开</div>
                    <div>
                        <button class="btn btn-primary" id="run-btn">运行</button>
                        <button class="btn" id="save-btn">保存</button>
                    </div>
                </div>
                
                <!-- 代码编辑器 -->
                <div class="editor-container">
                    <textarea id="editor" placeholder="打开文件开始编辑..."></textarea>
                </div>
                
                <!-- 终端区域 -->
                <div class="terminal-container">
                    <div class="terminal-header">
                        <div class="terminal-title">终端</div>
                    </div>
                    <div id="terminal-content" class="terminal-content">
                        <!-- 终端输出将在这里显示 -->
                    </div>
                    <div class="terminal-input-container">
                        <input type="text" id="terminal-input" placeholder="输入命令...">
                        <button class="btn btn-primary" id="terminal-send">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <h3>用户登录</h3>
            <div class="form-group">
                <label>用户名/邮箱:</label>
                <input type="text" id="loginIdentifier" placeholder="输入用户名或邮箱">
            </div>
            <div class="form-group">
                <label>密码:</label>
                <input type="password" id="loginPassword" placeholder="输入密码">
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" onclick="login()">登录</button>
                <button class="btn" onclick="hideModals()">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <h3>用户注册</h3>
            <div class="form-group">
                <label>用户名:</label>
                <input type="text" id="registerUsername" placeholder="输入用户名">
            </div>
            <div class="form-group">
                <label>邮箱:</label>
                <input type="email" id="registerEmail" placeholder="输入邮箱">
            </div>
            <div class="form-group">
                <label>密码:</label>
                <input type="password" id="registerPassword" placeholder="输入密码">
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" onclick="register()">注册</button>
                <button class="btn" onclick="hideModals()">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 创建文件模态框 -->
    <div id="create-file-modal" class="modal">
        <div class="modal-content">
            <h3>创建文件</h3>
            <div class="form-group">
                <label>路径:</label>
                <input type="text" id="new-file-path" readonly>
            </div>
            <div class="form-group">
                <label>文件名:</label>
                <input type="text" id="new-file-name" placeholder="输入文件名">
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" id="create-file-confirm">创建</button>
                <button class="btn" onclick="hideModals()">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 创建文件夹模态框 -->
    <div id="create-folder-modal" class="modal">
        <div class="modal-content">
            <h3>创建文件夹</h3>
            <div class="form-group">
                <label>路径:</label>
                <input type="text" id="new-folder-path" readonly>
            </div>
            <div class="form-group">
                <label>文件夹名:</label>
                <input type="text" id="new-folder-name" placeholder="输入文件夹名">
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" id="create-folder-confirm">创建</button>
                <button class="btn" onclick="hideModals()">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 重命名模态框 -->
    <div id="rename-modal" class="modal">
        <div class="modal-content">
            <h3>重命名</h3>
            <div class="form-group">
                <label>新名称:</label>
                <input type="text" id="rename-new-name" placeholder="输入新名称">
                <input type="hidden" id="rename-old-path">
            </div>
            <div class="form-actions">
                <button class="btn btn-primary" id="rename-confirm">重命名</button>
                <button class="btn" onclick="hideModals()">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 右键菜单 -->
    <div id="context-menu" class="context-menu">
        <div class="context-menu-item" data-action="new-file">新建文件</div>
        <div class="context-menu-item" data-action="new-folder">新建文件夹</div>
        <div class="context-menu-item" data-action="rename">重命名</div>
        <div class="context-menu-item danger" data-action="delete">删除</div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>